<template>
  <div class="container">
    <div class="goods">
      <!-- BEGIN 商品轮播图 -->
      <van-swipe class="goods-swipe" :autoplay="100000">
        <van-swipe-item v-for="thumb in data.goodsinfo.album" :key="thumb.id">
          <van-image :src="thumb.path" />
        </van-swipe-item>
      </van-swipe>
      <!-- END 商品轮播图 -->

      <!-- BEGIN 商品基本信息 -->
      <van-cell-group class="goods-cell-group">
        <van-cell>
          <div class="goods-title">{{ data.goodsinfo.name }}</div>
          <div class="goods-desc">
            <span v-show="data.goodsinfo.slogan" class="quote">{{data.goodsinfo.slogan}}</span>
            {{data.goodsinfo.description}}
          </div>
          <div class="goods-price">
            <span class="price-cny">{{ data.goodsinfo.price }}</span>
          </div>
        </van-cell>
        <van-cell class="goods-cell-custorm">
          <span>
            <van-icon name="passed" />免运费
          </span>
          <span>
            <van-icon name="passed" />
            销量：{{ data.goodsinfo.sales }}
          </span>
          <span v-if="data.goodsinfo.place">
            <van-icon name="passed" />
            {{ data.goodsinfo.place }}
          </span>
        </van-cell>
      </van-cell-group>
      <!-- END 商品基本信息 -->

      <!-- BEGIN 商品SKU、参数信息 -->
      <van-cell-group class="mt10 goods-cell-group" v-if="data.initialSku">
        <van-cell title="规格" is-link @click="onDownloadDialog">
          <span v-html="data.initialSku.text"></span>
        </van-cell>
        <van-cell title="参数" is-link>
          <span>无</span>
        </van-cell>
      </van-cell-group>
      <!-- END 商品SKU、参数信息 -->

      <!-- BEGIN 推荐评价 -->
      <van-cell-group class="mt10 user-panel">
        <van-cell title="商品详情"></van-cell>
      </van-cell-group>
      <!-- END 推荐评价 -->

      <!-- BEGIN 商品详情 -->
      <div class="framerich goods-detail" v-html="data.goodsinfo.content"></div>
      <!-- END 商品详情 -->
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onDownloadDialog" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onDownloadDialog" />
      <van-goods-action-button type="warning" text="加入购物车" @click="onDownloadDialog" />
      <van-goods-action-button type="danger" text="立即购买" @click="onDownloadDialog" />
    </van-goods-action>
  </div>
</template>

<script>
import { openApp } from '../../common/util'
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  Dialog,
  Button,
  Image,
  GoodsAction,
  GoodsActionButton,
  GoodsActionIcon
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Image.name]: Image,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionButton.name]: GoodsActionButton,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [Dialog.Component.name]: Dialog.Component,
    openApp
  },

  data () {
    return {
      data: {
        sku: {},
        goodsinfo: {},
        initialSku: {},
        cart: {
          skuCount: '',
          link: null
        },
        service: null
      }
    }
  },
  created: function () {
    this.onLoad()
  },
  computed: {
    queryParams () {
      return this.$route.query
    }
  },
  watch: {
    congratulate: {
      handler (curVal, oldVal) {
        if (!curVal) {
          console.log('no congratulate', curVal)
        } else {
          console.log('congratulate', curVal)
        }
      },
      deep: true
    }
  },
  methods: {
    onLoad () {
      this.axios
        .get('/shop/spu/' + this.queryParams.id, {
          headers: { openAuth: true, FastMode: true }
        })
        .then(response => {
          this.data = response.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },

    onDownloadDialog () {
      openApp(res => {
        this.$router.replace({
          name: 'download'
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.van-goods-action {
  &-big-btn:disabled {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0.65;
  }
  &-icon__icon.van-icon-star {
    color: #ff6600;
  }
}

.goods {
  padding-bottom: 50px;

  &-swipe {
    img {
      width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  &-title {
    font-size: 18px;
    color: #121212;
    font-weight: 500;
    min-height: 20px;
  }

  &-price {
    color: #f44;
    font-size: 24px;
  }

  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }

  &-detail {
    word-wrap: break-word;
    font-size: 80%;
    padding-left: 0;
    padding-right: 0;
    p {
      margin: 10px 0;
      padding: 0 15px;
    }
    h1 {
      color: #f44;
      font-weight: normal;
    }
    img {
      width: 100%;
    }
  }

  &-mark {
    word-wrap: break-word;
    font-size: 0.2rem;
    border: 1px dashed #aaa;
    border-radius: 0.15rem;
    padding: 0.3rem;
    position: relative;
    margin-top: 0.5rem;
    line-height: 0.36rem;
    color: #666;
  }

  &-mark:before {
    position: absolute;
    left: 50%;
    top: 0;
    width: 20%;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-left: -10%;
    margin-top: -0.2rem;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    background: white;
    content: "兑换说明";
  }
}
.van-sku-actions {
  padding: 15px;
  .van-button--bottom-action {
    height: 40px;
    line-height: 40px;
  }
}
.van-goods-action /deep/ {
  .van-info {
    font-size: 10px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0.5px 2px;
    font-family: auto;
    &:empty {
      display: none;
    }
  }
}
/deep/ .van-swipe {
  &__track {
    padding-bottom: 100%;
  }
  &-item {
    position: relative;
    height: 3.5rem !important;
  }
}
.goods-cell-custorm {
  .van-cell__value {
    font-size: 80%;
    line-height: 1.1;
    color: #868686;
    span {
      margin-right: 5px;
    }
    i.van-icon {
      font-size: 80%;
      color: #f56660;
    }
  }
}

.avatar {
  width: 20px;
  height: 20px;
}

.user-panel /deep/ .van-cell__title {
  flex: 2;
  -webkit-box-flex: 2;
}
.user-avatar {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  height: 0.75rem;
  margin-right: 0.2rem;
}
.user-avatar > img {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.user-avatar > span {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background-color: #ff6600;
  color: #fff;
  line-height: 0.2rem;
  font-size: 0.1rem;
  text-align: center;
}
.van-cell-text {
  font-size: 0.3rem;
  font-weight: 500;
}
.user-panel /deep/ .van-cell__value span {
  font-size: 0.3rem;
  font-weight: 600;
  color: #ff6600;
  padding-right: 0.05rem;
}

/deep/ .van-sku {
  &-row {
    &__item {
      background: #f4f4f4;
      color: #333;
      border: none;
      font-weight: 300;
      &--active {
        position: relative;
        background: rgba(255, 82, 3, 0.2);
        color: #ff5203;
        &::after {
          content: " ";
          position: absolute;
          pointer-events: none;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          top: -50%;
          left: -50%;
          right: -50%;
          bottom: -50%;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          border: 0 solid #ff5203;
        }
      }
      &--disabled {
        color: #ccc;
        background: #f1f4f7;
      }
    }
  }
  &-messages {
    &:empty {
      padding-bottom: 0;
    }
  }
}
</style>
